import React, { Component } from 'react'

const messageDetail = [
  { id: 1, title: 'Message 001', content: 'Content 001' },
  { id: 2, title: 'Message 002', content: 'Content 002' },
  { id: 3, title: 'Message 003', content: 'Content 003' },
]

export default class Detail extends Component {
  state = {
    detail: {}
  }

  getDetail = () => {
    setTimeout(() => {
      const id = this.props.match.params.id * 1;
      const detail = messageDetail.find(detail => id === detail.id)
      this.setState({
        detail
      })
    }, 1000);
  }
  componentWillReceiveProps() {
    this.getDetail()
  }
  componentDidMount() {
    this.getDetail()
  }



  render() {
    const { detail } = this.state

    return (
      <ul>
        <li>ID: {detail.id}</li>
        <li>Title:{detail.title}</li>
        <li>Content: {detail.content}</li>
      </ul>
    )
  }
}
